<template>
    <view class="userInfo">
        <view class="top">
            <view v-if="state.isUpLoad" class="upLoad">
                <u-upload @afterRead="upLoadAvatar" useBeforeRead width="170rpx" height="170rpx" uploadIcon="plus"
                    name="1" maxCount="1" multiple :deletable="false"></u-upload>
            </view>

            <up-image :src="state.userAvatar" v-else width="175rpx" height="175rpx" shape="circle">
            </up-image>
            <view class="editAvatar" v-show="!state.isUpLoad">
                <u-icon name="edit-pen-fill" size="12" color="#fff"></u-icon>
            </view>
            <view class="editUpLoad">
                <u-upload @afterRead="upLoadAvatar" width="46rpx" height="46rpx" uploadIcon="plus" name="1" maxCount="1"
                    multiple :deletable="false"></u-upload>
            </view>
        </view>
        <view class="main">
            <view class="infoList" v-for="(item, index) in infoList" :key="index" @click="openPopup(index)">
                <text>{{ item.name }}:</text>
                <view class="item-R">
                    <text>{{ item.value }}</text>
                    <u-icon name="arrow-right" :size="12"></u-icon>
                </view>
            </view>
            <view class="infoList">
                注册日期: 2023-02-24
            </view>
        </view>
        <u-popup mode="center" :round="10" :show="infoList[0].editState" @close="closePopup(0)">
            <view class="username">
                <text>修改名称</text>
                <input type="text" placeholder="请输入名称..." v-model="state.username">
                <view class="lineRow"></view>
                <view class="option">
                    <text class="optionItem optionClose" @click="closePopup(0)">取消</text>
                    <view class="lineColumn"></view>
                    <text class="optionItem optionOk" @click="clickOk">确认</text>
                </view>
            </view>
        </u-popup>
        <u-popup :round="10" closeable :show="infoList[1].editState" @close="closePopup(1)">
            <view class="gender">
                <text>请选择性别</text>
                <view class="gOption" @click="clickGender(0)">
                    <text>男</text>
                    <u-icon name="checkbox-mark" v-if="!state.gender" :size="15" color="#966BFF"></u-icon>
                </view>
                <view class="gOption" @click="clickGender(1)">
                    <text>女</text>
                    <u-icon name="checkbox-mark" v-if="state.gender" :size="15" color="#966BFF"></u-icon>
                </view>
            </view>
        </u-popup>
        <u-popup :round="10" closeable :show="infoList[5].editState" @close="closePopup(5)">
            <view class="signature">
                <text>请填写个性签名</text>
                <input type="text" placeholder="此夜无眠" v-model="state.signature" />
            </view>
        </u-popup>
        <u-datetime-picker :show="infoList[4].editState" v-model="state.birthdayTime" :minDate="minDate"
            :maxDate="maxDate" mode="date" confirmColor="#966BFF" @confirm="confirmTime"
            @cancel="cancelTime"></u-datetime-picker>
    </view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';

const infoList = reactive([
    { name: "用户名", value: "默认微信名", editState: false },
    { name: "性别", value: "请选择性别", editState: false },
    { name: "手机号码", value: "12345678925", editState: false },
    { name: "居住地", value: "请选择省份", editState: false },
    { name: "生日", value: "请选择生日", editState: false },
    { name: "个性签名", value: "请填写签名", editState: false }
])

const state = reactive({
    gender: 0,
    username: "",
    isUpLoad: true,
    signature: "",
    birthdayTime: new Date().getTime(),
    userAvatar: ''
})

const upLoadAvatar = (event: any) => {
    console.log('event :>> ', event);
    state.userAvatar = event.file[0].url
    state.isUpLoad = false
}

const openPopup = (index: number) => {
    infoList[index].editState = true
}
const closePopup = (index: number) => {
    infoList[index].editState = false
    if (index === 5 && state.signature != "") {
        infoList[5].value = state.signature
    }else if (state.signature == "") {
        infoList[5].value = "请填写签名"
    }
}
//点击用户名编辑框的确认按钮
const clickOk = () => {
    infoList[0].value = state.username
    closePopup(0)
}
const clickGender = (index: number) => {
    if (index == state.gender) {
        return
    }
    state.gender = index
    if (index === 0) {
        infoList[1].value = "男"
    } else {
        infoList[1].value = "女"
    }
}
const minDate = ref(new Date(1950, 0, 1).getTime())
const maxDate = ref(new Date().getTime())
const confirmTime = (e: any) => {
    console.log('e :>> ', e);
    closePopup(4)
}
const cancelTime = () => {
    closePopup(4)
}
</script>

<style lang="scss" scoped>
.userInfo {
    .top {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 80rpx;

        .upLoad {
            width: 170rpx;
            height: 170rpx;
            border-radius: 50%;
            overflow: hidden;
        }

        .editAvatar {
            padding: 16rpx;
            background-color: #000;
            border-radius: 50%;
            position: relative;
            left: 57rpx;
            bottom: 57rpx;
        }

        .editUpLoad {
            opacity: 0;
            width: 57rpx;
            height: 57rpx;
            border-radius: 50%;
            overflow: hidden;
            position: relative;
            left: 57rpx;
            bottom: 114rpx;
        }
    }

    .main {
        display: flex;
        flex-direction: column;

        .infoList {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            margin: 28rpx;
            font-size: 34rpx;
            letter-spacing: 0.05rem;

            .item-R {
                display: flex;
                flex-direction: row;

                text {
                    margin-right: 15rpx;
                }
            }
        }
    }

    .username {
        display: flex;
        flex-direction: column;
        text-align: center;

        text {
            margin: 20rpx 0;
        }

        input {
            margin: 40rpx;
            padding: 10rpx;
            border-radius: 15rpx;
            background: #F6F6F6;
            font-size: 25rpx;
            text-align: left;
            width: 500rpx;
        }

        .lineRow {
            height: 2rpx;
            background-color: #F9F9F9;
        }

        .option {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            padding: 10rpx 0;
            font-size: 35rpx;

            .lineColumn {
                height: 120%;
                width: 2rpx;
                background-color: #F9F9F9;
            }

            .optionClose {
                font-weight: bold;
                padding-left: 30rpx;
            }

            .optionOk {
                padding-right: 40rpx;
                color: #966BFF;

            }

        }
    }

    .gender,
    .signature {
        display: flex;
        flex-direction: column;
        height: 800rpx;

        text {
            text-align: center;
            margin: 30rpx 0;
        }

        input {
            padding: 10rpx;
            font-size: 35rpx;
        }

        .gOption {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 0 30rpx;
        }
    }
}
</style>